<!--
 * @author wangpeizhi
 -->
<template>
  <div class="directional-user-select">
    <el-dialog
      v-el-drag-dialog
      :close-on-click-modal="false"
      :visible.sync="visible"
      title="选择用户"
      fullscreen
      center
      @close="handleCancel()"
    >
      <section class="select-inner">
        <el-row type="flex" justify="space-around" :gutter="10">
          <el-col :span="4">
            <tree ref="qyTree" @breadLists="breadLists" @clickTreeData="clickTreeData" />
          </el-col>
          <el-col :span="16">
            <div class="select-table">
              <div class="search-inner">
                <el-row>
                  <el-col :span="6">
                    <div class="search-inner-item">
                      <div class="item-label">真实姓名</div>
                      <el-input
                        v-model.trim="search.userRealname"
                        style="width: 90%;"
                        class="filter-item"
                        placeholder="请输入真实姓名搜索"
                      />
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <div class="search-inner-item">
                      <div class="item-label">联系电话</div>
                      <el-input
                        v-model.trim="search.phoneNumber"
                        style="width: 90%;"
                        class="filter-item"
                        placeholder="请输入联系电话搜索"
                      />
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <div class="search-inner-item">
                      <div class="item-label">性别</div>
                      <el-select v-model="search.userSex" style="width: 90%;">
                        <el-option v-for="(item) in dict.XB" :key="item.dictValue" :value="item.dictValue" :label="item.dictName" />
                      </el-select>
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <div class="search-inner-item">
                      <div class="item-label">生日月份</div>
                      <el-select v-model="search.month" style="width: 90%;">
                        <el-option v-for="item in 12" :key="item" placeholder="选择月份" :value="item < 10 ? '0' + item : item.toString()" :label="item + '月'" />
                      </el-select>
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <div class="search-inner-item">
                      <div class="item-label">会员状态</div>
                      <el-select v-model="search.memberStatus" style="width: 90%;">
                        <el-option v-for="(item) in dict.HYZT" :key="item.dictValue" :value="item.dictValue" :label="item.dictName" />
                      </el-select>
                    </div>
                  </el-col>
                  <el-col :span="6">
                    <div class="search-inner-item">
                      <div class="item-label">认证状态</div>
                      <el-select v-model="search.isAuth" style="width: 90%;">
                        <el-option value="RZZT03" label="已认证" />
                        <el-option value="RZZT01" label="未认证" />
                      </el-select>
                    </div>
                  </el-col>
                  <el-col :span="12" style="margin-bottom: 10px;">
                    <div class="search-inner-item">
                      <div class="item-label">&nbsp;</div>
                      <el-button class="search-btn" @click="handleReset">重置</el-button>
                      <el-button style="margin-right: 10px" class="search-btn" type="primary" @click="handleFilter">搜索
                      </el-button>
                    </div>
                  </el-col>
                </el-row>
                <span v-if="breadList.length > 0" class="span">当前选择：</span>
                <span
                  v-if="breadList.length"
                  class="btn-container-title-select"
                  :title="breadList.join('>')"
                >{{ breadList.join('>') }}</span>
              </div>
              <div class="table-scrollbar">
                <el-table
                  ref="rolemantable"
                  v-loading="loading"
                  height="100%"
                  :data="list"
                  class="tableScope"
                  :row-key="getRowKeys"
                  @selection-change="handleSelectionChange"
                >
                  <el-table-column type="selection" width="55" :reserve-selection="true" />
                  <el-table-column prop="userRealname" label="姓名" show-overflow-tooltip />
                  <el-table-column prop="userSexName" label="性别" show-overflow-tooltip width="50" />
                  <el-table-column prop="birthday" label="生日" show-overflow-tooltip />
                  <el-table-column prop="jieMuserIdnumber" label="证件号码" show-overflow-tooltip />
                  <el-table-column prop="jieMphoneNumber" label="联系电话" show-overflow-tooltip />
                  <el-table-column prop="deptName" label="所属部门" show-overflow-tooltip />
                  <el-table-column prop="isAuthName" label="认证状态" show-overflow-tooltip />
                  <el-table-column prop="memberStatusValue" label="会员状态" show-overflow-tooltip />
                </el-table>
              </div>
              <div class="btn-pagion fix">
                <pagination
                  :total="total"
                  :page.sync="listQuery.page"
                  :limit.sync="listQuery.limit"
                  @pagination="getlist"
                />
              </div>
            </div>
          </el-col>
          <el-col :span="4">
            <p>已选择人员：</p>
            <ul class="select-user">
              <li v-for="(item, index) in selection" :key="index">{{ item.userRealname }}</li>
            </ul>
          </el-col>
        </el-row>
      </section>
      <div slot="footer" class="dialog-footer">
        <el-button style="padding: 8px 30px;" @click="handleCancel()">关 闭</el-button>
        <el-button type="primary" style="padding: 8px 30px;" @click="handleSub">确 认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { queryPageDeptUser, getDictByCode } from './api'
import CryptoJS from '@/utils/aesJiaJM'
import Tree from './components/tree'
import Pagination from '@/components/Pagination'
import elDragDialog from '@/directive/el-drag-dialog'
import { get } from '../../api/index'

export default {
  name: 'UserSelect',
  components: { Tree, Pagination },
  directives: { elDragDialog },
  props: {
    id: {
      type: String,
      default: ''
    },
    type: {
      tyepe: String,
      default: ''
    }
  },
  data() {
    return {
      visible: false,
      loading: false,
      selection: [],
      search: {
        userName: '',
        userRealname: '',
        phoneNumber: '',
        companyName: '',
        userSex: '',
        month: '',
        memberStatus: '',
        isAuth: ''
      },
      breadList: [],
      list: [],
      listQuery: {
        page: 1,
        limit: 10
      },
      total: 0,
      curnode: {
        orgId: '',
        deptId: ''
      },
      tipvisible: false,
      topnumber: '',
      max: '',
      dict: {
        XB: [], // 性别
        RZZT: [], // 认证状态
        HYZT: [] // 会员状态
      }
    }
  },
  created() {
    this.visible = true
    this.getlist()
    for (const key in this.dict) {
      this.getDict(key)
    }
  },
  methods: {
    /**
     * 获取字典
     */
    getDict(code) {
      return new Promise((resolve, reject) => {
        getDictByCode(code).then(response => {
          this.dict[code] = response.data.data[0].list
        }).catch(error => {
          reject(error)
        })
      })
    },
    handleCancel() {
      this.$emit('cancel')
    },
    handleSub() {
      if (this.selection.length > 0) {
        this.$emit('comit', { data: this.selection, number: 1 })
      } else {
        this.$message({
          message: '请选择用户！',
          type: 'warning',
          duration: 1500
        })
      }
    },
    handleComit() {
      if (this.selection.length > 0) {
        this.$emit('comit', { data: this.selection, number: this.topnumber })
      } else {
        this.$message({
          message: '请选择用户！',
          type: 'warning',
          duration: 1500
        })
      }
    },

    clickTreeData(data) {
      this.curnode.orgId = data.orgId
      this.curnode.deptId = data.deptId
      this.getlist()
    },

    /**
     * 当前选择组织
     *  */
    breadLists(data) {
      this.breadList = data
    },

    /*
      * 搜索添加用户列表
      */
    handleFilter() {
      this.listQuery.page = 1
      this.getlist()
    },

    /*
    * 重置人员列表
    * */
    handleReset() {
      this.listQuery.page = 1
      for (const i in this.search) {
        this.search['' + i + ''] = ''
      }
      this.getlist()
    },

    getRowKeys(row) {
      return row.id
    },

    handleSelectionChange(arr) {
      this.$emit('userData', arr)
      this.selection = arr
    },

    getlist(obj) {
      this.loading = true
      var query = {
        page: obj ? obj.page : this.listQuery.page,
        pageSize: obj ? obj.limit : this.listQuery.limit,
        orgId: this.curnode.orgId || '',
        deptId: this.curnode.deptId || '',
        userName: this.search.userName,
        userRealname: this.search.userRealname,
        phoneNumber: this.search.phoneNumber,
        userSex: this.search.userSex,
        memberStatus: this.search.memberStatus,
        month: this.search.month,
        isAuth: this.search.isAuth
      }
      return new Promise((resolve, reject) => {
        queryPageDeptUser(query).then(response => {
          this.list = response.data.data.rows
          this.list.forEach(element => {
            if (element.phoneNumber) {
              element.jieMphoneNumber = CryptoJS.$aesJieM(element.phoneNumber)
            }
            if (element.userIdnumber) {
              element.jieMuserIdnumber = CryptoJS.$aesJieM(element.userIdnumber)
            }
            if (element.birthday) {
              element.birthday = element.birthday ? element.birthday.substring(0, 10) : ''
            }
          })
          this.total = response.data.data.total
          this.loading = false
        }).catch(error => {
          reject(error)
          this.loading = false
        })
      })
    },

    getGrant() {
      const loading = this.$loading({
        lock: true,
        text: '请稍后',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.3)'
      })
      return new Promise((resolve, reject) => {
        get(this.id).then(res => {
          loading.close()
          this.topnumber = res.data.data.userUpperLimit || 0
          this.max = res.data.data.userUpperLimit || ''
        }).catch(error => {
          loading.close()
          reject(error)
        })
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" type="text/scss">

.directional-user-select {
  position: relative;

  .select-inner {
    max-height: calc(100vh - 130px);
    min-height: calc(100vh - 130px);
    position: relative;

    &::after {
      content: '';
      height: 1px;
      background-color: #e2e3e8;
      position: absolute;
      bottom: 0;
      left: -20px;
      right: -20px;
    }
  }

  .select-table {
    height: calc(100vh - 130px);
    padding-left: 10px;
    padding-right: 10px;
    position: relative;

    &::before {
      content: '';
      width: 1px;
      background-color: #e2e3e8;
      position: absolute;
      left: 0;
      top: -20px;
      bottom: 0;
    }

    &::after {
      content: '';
      width: 1px;
      background-color: #e2e3e8;
      position: absolute;
      top: -20px;
      right: 0;
      bottom: 0;
    }

    .tableScope {
      padding: 0;
    }

    .table-scrollbar {
      overflow: hidden;
      height: calc(100vh - 320px);
    }

    .search-inner {
      .search-inner-item {
        margin-bottom: 10px;

        .item-label {
          margin-bottom: 10px;
        }
      }

      .span {
        overflow: hidden;
        display: inline-block;
      }

      .btn-container-title-select {
        display: inline-block;
        width: 744px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        @include font-color($mainColor);
      }
    }
    .pagination-container {
      padding: 12px 15px;
    }
  }

  .select-user {
    padding: 0;
    margin: 0;
    height: calc(100vh - 185px);
    overflow: auto;
    list-style: none;

    li {
      padding: 5px 8px;
      margin: 0;
      float: left;
      list-style: none;
      font-size: 14px;
      @include font-color($mainColor);
      @include border-color(1px, solid, $mainColor);
      border-radius: 5px;
      margin-left: 8px;
      margin-bottom: 8px;
    }
  }
}
</style>
